<template>
  <div class="callUrl">
    <affix :label="$t('configLazyLoad.interfaceConfig.callUrlList')"></affix>
    <configCompositionTwoWindowStyle :leftWidth="12" :rightWidth="12" :height="240">
      <template slot="card">
        <div style="margin-right: 20px;">
          <diyTable :tableHeader="tableHeader" :tableData="tableData" @updata="updata" @del="del" @add="add"></diyTable>
        </div>
      </template>
      <template slot="detail">
        <div style="margin-left: 20px;" v-if="isShowDetail">
          <breadCrumb :titleArr="titleArr" @back="back"></breadCrumb>
          <div class="callUrlDetail">
            <el-form :model="callUrlForm" label-position="top" label-width="120px">
              <el-form-item :label="$t('agentSetting.agentSetting43')" class="item">
                <el-input :maxlength=20 v-model.trim="callUrlForm.name" :placeholder="$t('public.pleaseInput')"></el-input>
              </el-form-item>
              <el-form-item v-if="callUrlForm.type === '2' || !callUrlForm.moreRadio" class="item">
                <div slot="label">
                  {{$t('configLazyLoad.interfaceConfig.screenUrl')}}
                    <i class="iconfont icon-wenzishuoming"></i>
                    <span  class="httpsRecommend">
                      {{$t('configLazyLoad.interfaceConfig.httpsRecommend')}}
                    </span>
                </div>
                <el-input v-model.trim="callUrlForm.url" :placeholder="$t('public.pleaseInput')"></el-input>
              </el-form-item>
              <el-form-item :label="$t('configLazyLoad.interfaceConfig.screenType')" class="item">
                <el-select v-model="callUrlForm.type" :placeholder="$t('public.pleasePick')" @change="selectChange">
                  <el-option v-for="item in callUrlType" :label="item.code_name" :value="item.code_value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item :label="$t('configLazyLoad.interfaceConfig.screenOpenType')" v-show="callUrlForm.type === '2'" class="item">
                <el-select v-model="callUrlForm.outOpenType" :placeholder="$t('public.pleasePick')">
                  <el-option :label="$t('configLazyLoad.interfaceConfig.newWindow')" value="win"></el-option>
                  <el-option :label="$t('configLazyLoad.interfaceConfig.tabPage')" value="tab"></el-option>
                </el-select>
              </el-form-item>
              <!--======更多设置  start==============-->
              <el-form-item class="item" v-show="callUrlForm.type === '1'">
                <div class="moreConfig" @click="moreConfigFun">更多设置<span :class="callUrlForm.moreConfig ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"></span></div>
              </el-form-item>
              <el-form-item class="item" label="是否开启更多业务选择" v-if="!callUrlForm.moreConfig && callUrlForm.type === '1'">
                <el-radio v-model="callUrlForm.moreRadio" :label="false">否</el-radio>
                <el-radio v-model="callUrlForm.moreRadio" :label="true">是</el-radio>
              </el-form-item>
              <el-form-item class="item" v-if="!callUrlForm.moreConfig && callUrlForm.moreRadio && callUrlForm.type === '1'">
                <div class="moreBox" v-for="(item, index) in moreBoxArr" :key="index">
                  <div class="floatLeft" style="marginRight: 10px">
                    <div class="moreLabel floatLeft">名称：</div>
                    <el-input :maxlength=20 v-model.trim="item.name" placeholder="请输入名称"></el-input>
                  </div>
                  <div class="floatLeft">
                    <div class="moreLabel floatLeft">URL：</div>
                    <el-input v-model.trim="item.url" placeholder="请输入URL"></el-input>
                  </div>
                  <div class="el-icon-circle-plus-outline icont add floatLeft" @click="moreAdd"></div>
                  <div class="el-icon-remove-outline icont del floatLeft" @click="moreDel(index)" v-if="index > 0"></div>
                </div>
              </el-form-item>
              <!--======更多设置  end==============-->
            </el-form>
            <el-button type="primary" class="primary_btn" @click="addCallUrl">{{$t('public.save')}}</el-button>
          </div>
        </div>
      </template>
    </configCompositionTwoWindowStyle>
  </div>
</template>
<script>
  import Affix from '../../../../ui-modules/affix/Affix.vue'
  import breadCrumb from '../../../../ui-modules/breadCrumb/BreadCrumbConfig.vue'
  import configCompositionTwoWindowStyle from '../../../../ui-modules/config/configCompositionTwoWindowStyle'
  import diyTable from '../base/diyTable'
  import {deepClone} from '@/utils/m7Utils.js'
  export default {
    name: 'callUrl',
    data () {
      return {
        titleArr: [this.$t('configLazyLoad.interfaceConfig.callUrlList'), this.$t('configLazyLoad.interfaceConfig.addInterfacePage')],
        addOrEdit: 'add',
        isShowDetail: false,
        callUrlType: [],
        tableHeader: [
          {prop: 'name', label: this.$t('agentSetting.agentSetting43')},
          {prop: 'url', label: this.$t('configLazyLoad.interfaceConfig.screenUrl')},
          {prop: 'typeName', label: this.$t('configLazyLoad.interfaceConfig.screenType')},
          {prop: 'operate', label: this.$t('public.operate')}
        ],                        //   自定义 表头
        tableData: [],
        callUrlForm: {
          name: '',
          url: 'http://',
          type: '1',
          outOpenType: 'win',
          moreConfig: true,
          moreRadio: false,
        },
        moreBoxArr: [
          {name: '', url: 'http://'}
        ]
      }
    },
    methods: {
      fetchData () {
        this.$store.dispatch('queryCallUrlFields', {idle: ''}).then(res => {
          if (res && res.success) {
            this.callUrlType = this.$getCache('callUrlType')
            this.tableData = res.data
            this.tableData.forEach(item => {
              this.callUrlType.forEach(one => {
                if (item.type === one.code_value) {
                  item.typeName = one.code_name
                }
              })
            })
          }
        })
      },
      add () {
        this.titleArr.splice(1, 1, this.$t('configLazyLoad.interfaceConfig.addInterfacePage'))
        this.addOrEdit = 'add'
        this.isShowDetail = true
        this.callUrlForm.name = ''
        this.callUrlForm.type = '1'
        this.callUrlForm.url = 'https://'
        this.callUrlForm.outOpenType = 'win'
        this.callUrlForm.moreRadio = false
        this.callUrlForm.moreConfig = true
        this.moreBoxArr = [{name: '', url: 'http://'}]
      },
      back () {
        this.isShowDetail = false
      },
      selectChange (val) {
        if (val === '2') {
          this.callUrlForm.moreRadio = false
          this.callUrlForm.moreConfig = true
        }
      },
      addCallUrl () {
        let data = deepClone(this.callUrlForm)
        if (data.name === '') {
          this.$message.error(this.$t('configLazyLoad.interfaceConfig.descEmpty'))
          return
        }
        let rep = new RegExp(/^((http|ftp|https):\/\/)(([a-zA-Z0-9._-]+\.[a-zA-Z]{2,6})|([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}))(:[0-9]{1,4})*(\/[a-zA-Z0-9&%_./-~-]*)?/)
        data.businesses = this.moreBoxArr
        if (!this.callUrlForm.moreRadio) {
          delete data.businesses
        } else {
          delete data.url
        }
        if (data.url && !rep.test(data.url)) {
          this.$message.error(this.$t('configLazyLoad.interfaceConfig.urlIncorrect'))
          return
        }
        let tabBusiness = data.businesses
        if (tabBusiness) {
          for (let i = 0; i < tabBusiness.length; i++) {
            if (tabBusiness[i].url && !rep.test(tabBusiness[i].url)) {
              this.$message.error(this.$t('configLazyLoad.interfaceConfig.urlIncorrect'))
              return false
            }
          }
        }
        console.log(data)
        if (this.addOrEdit === 'add') {
          delete data._id
          this.$store.dispatch('addCallUrlFields', data).then(res => {
            if (res && res.success) {
              this.fetchData()
              this.isShowDetail = false
            }
          })
        } else {
          this.$store.dispatch('editCallUrlFields', data).then(res => {
            if (res && res.success) {
              this.fetchData()
              this.isShowDetail = false
            }
          })
        }
      },
      updata (val) {
        this.titleArr.splice(1, 1, this.$t('configLazyLoad.interfaceConfig.editInterfacePage'))
        this.addOrEdit = 'edit'
        this.isShowDetail = true
        this.callUrlForm._id = val._id
        this.callUrlForm.name = val.name
        this.callUrlForm.type = val.type
        this.callUrlForm.outOpenType = val.outOpenType
        if (val.businesses && val.businesses.length > 0) {
          this.moreBoxArr = val.businesses
          this.callUrlForm.url = 'http://'
          this.callUrlForm.moreConfig = false
          this.callUrlForm.moreRadio = true
        } else {
          this.moreBoxArr = [{name: '', url: 'http://'}]
          this.callUrlForm.url = val.url
          this.callUrlForm.moreConfig = true
          this.callUrlForm.moreRadio = false
        }
      },
      del (val) {
        let data = {}
        data._id = val._id
        this.$confirm(this.$t('configLazyLoad.interfaceConfig.confirmDelete'), this.$t('public.tip'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('delCallUrlFields', data).then(res => {
            if (res && res.success) {
              this.fetchData()
              this.$message({
                message: this.$t('configLazyLoad.interfaceConfig.deleteSucc'),
                type: 'success'
              })
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('public.cancel')
          })
        })
      },
//      更多设置相关
      moreConfigFun () {
        this.callUrlForm.moreConfig = !this.callUrlForm.moreConfig
      },
      moreAdd () {
        this.moreBoxArr.push({name: '', url: 'http://'})
      },
      moreDel (index) {
        this.moreBoxArr.splice(index, 1)
      },
    },
    components: {
      Affix,
      configCompositionTwoWindowStyle,
      diyTable,
      breadCrumb
    },
    beforeMount () {
      this.fetchData()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../assets/common.styl"
  .callUrl
    padding 20px
    .callUrlDetail
      padding 20px
      .icon-wenzishuoming,.httpsRecommend
        font-size 12px
      .el-input,.el-select
        max-width 220px
    .item
      margin-bottom 20px
    .moreConfig
      cursor pointer
      font-size 12px
    .moreBox
      clear both
      overflow hidden
    .moreLabel
      font-size 12px
      height 30px
    .floatLeft
      float left
    .icont
      margin-left 10px
      cursor pointer
      height 51px
      line-height 104px
    .add
      color #459AE9
    .del
      color red
</style>




















